<template>
  <div class="tool-bar">
    <div class="tool" title="返回原视角" @click="resetView">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="ico"
        width="64px"
        height="64.00px"
        viewBox="0 0 1024 1024"
        version="1.1"
      >
        <path
          d="M512 512m-463.584 0a463.584 463.584 0 1 0 927.168 0 463.584 463.584 0 1 0-927.168 0Z"
          fill="#00A2FF"
        />
        <path
          d="M49.144 538.188a469.72 469.72 0 0 1-0.728-26.188c0-65.248 13.508-127.368 37.88-183.708l14.12-4.708 40 42-8 86-83.272 86.604z m121.588 287.444c-67.904-73.84-112.18-169.74-120.784-275.664 45.864-5.224 114.468-10.592 114.468-10.592l52 88h32l28 36.208-105.684 162.048z m3.664-631.204l85.42-2.844v48l-60.232 124-44-4-36.432-93.688a465.98 465.98 0 0 1 55.244-71.468z m801.072 328.056l-11.884-4.484h-83.088a11.676 11.676 0 0 1-8.344-3.508l-102.94-105.08a11.68 11.68 0 0 0-17.764 1.268l-22.232 30.316a11.68 11.68 0 0 0 9.42 18.588h27.364c3.532 0 6.876 1.6 9.092 4.348l91.472 113.424a11.68 11.68 0 0 1 1.028 13.164l-144.636 251.212a11.68 11.68 0 0 1-10.124 5.852h-29.764a11.68 11.68 0 0 1-10.612-6.796l-85.744-186.404a11.68 11.68 0 0 0-10.612-6.8h-50.352a11.672 11.672 0 0 1-9.64-5.084l-46.48-67.932a11.672 11.672 0 0 1-2.044-6.596v-45.632c0-2.8 1.008-5.508 2.836-7.628l33.672-39.072a11.684 11.684 0 0 1 8.848-4.056h111.812a11.692 11.692 0 0 0 10.184-5.952l22.856-40.64a11.676 11.676 0 0 0-10.18-17.408h-130.472a11.68 11.68 0 0 1-10.776-16.192l62.22-148.636a11.684 11.684 0 0 1 10.776-7.172h236.932a11.68 11.68 0 0 0 11.268-14.752l-3.952-14.492a11.692 11.692 0 0 1 11.272-14.756h12.028C926.6 274.856 975.584 387.752 975.584 512c0 3.504-0.036 7-0.116 10.484z m-175.884 273.1l32 4-56 48v-20l24-32z"
          fill="#00E116"
        />
        <path
          d="M802.936 151.164c105.272 85.012 172.648 215.12 172.648 360.836 0 255.86-207.724 463.584-463.584 463.584-142.388 0-269.868-64.332-354.936-165.488 79.572 64.256 180.796 102.748 290.936 102.748 255.86 0 463.584-207.724 463.584-463.584 0-113.472-40.856-217.48-108.648-298.096z"
          fill-opacity=".2"
        />
      </svg>
    </div>
    <div class="tool" title="测距" @click="measureDistance('length')">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="icon"
        width="64px"
        height="64.00px"
        viewBox="0 0 1024 1024"
        version="1.1"
      >
        <path
          fill="#8a8a8a"
          d="M611.979034 2.28393c-34.487342 0-62.465485 28.092339-62.465484 62.579681 0 4.22527 0.456786 8.450541 1.256161 12.675811l-478.483328 478.483328C38.14163 550.998104 6.395004 574.522583 1.370358 608.667336c-5.024646 34.144753 18.499833 65.89138 52.644586 70.916025 34.144753 5.024646 65.89138-18.499833 70.916025-52.644585 1.256161-8.450541 0.799375-17.015278-1.484554-25.237427l475.742611-475.742611c33.802163 7.080183 66.919148-14.617152 73.885135-48.419316 7.080183-33.802163-14.617152-66.919148-48.419315-73.885134-4.111074-0.913572-8.450541-1.370358-12.675812-1.370358zM993.737928 326.601985L851.106502 183.970559c-39.626185-39.626185-103.918813-39.626185-143.659195 0L183.856362 707.561503c-39.626185 39.626185-39.626185 103.918813 0 143.659195l142.631427 142.631426c39.626185 39.626185 103.918813 39.626185 143.659194 0l523.590945-523.590944c39.626185-39.740381 39.626185-104.03301 0-143.659195z m-48.419315 95.125683L421.613472 945.318613c-12.904204 12.904204-33.802163 12.904204-46.706368 0L232.275677 802.801383c-12.904204-12.904204-12.904204-33.802163 0-46.706368l113.739713-113.739712L471.060555 767.400468l48.419316-48.419315L394.548902 593.821791l113.397122-113.397123 125.045166 125.045166 48.419315-48.419315-125.045165-125.045166 36.20029-36.20029 59.267982 59.267983 48.533512-48.419316-59.267983-59.267982 35.629308-35.629308L801.659418 436.687409l48.419315-48.419315L725.147764 263.337125l30.833055-30.833055c12.904204-12.904204 33.802163-12.904204 46.706367 0l142.631427 142.51723c12.904204 12.904204 12.904204 33.802163 0 46.706368zM260.31777 725.800968l48.449006-48.449006 59.512363 59.512363-48.449006 48.449006zM427.15657 558.96331l48.449006-48.449006 59.511221 59.512363-48.449006 48.449006z"
        />
      </svg>
    </div>
    <div class="tool" title="测面" @click="measureDistance('area')">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="icon"
        width="64px"
        height="64.00px"
        viewBox="0 0 1024 1024"
        version="1.1"
      >
        <path
          fill="#8a8a8a"
          d="M846.1824 873.7792H163.3792a18.6368 18.6368 0 0 1-18.5856-18.5856V172.3904c0-10.1888 8.2944-18.5856 18.5856-18.5856h682.8032c10.24 0 18.6368 8.2944 18.6368 18.5856v682.8032a18.5856 18.5856 0 0 1-18.6368 18.5856z m-664.2688-37.0688h645.6832V190.976H181.9136v645.7344z m18.5856-590.0288h-74.24a37.0688 37.0688 0 0 1-37.0688-37.0688v-74.24c0-20.48 16.5888-37.0688 37.12-37.0688h74.1888c20.48 0 37.12 16.5888 37.12 37.12v74.1888c0 20.48-16.64 37.0688-37.12 37.0688z m682.8032 0h-74.24a37.0688 37.0688 0 0 1-37.0688-37.0688v-74.24c0-20.48 16.5888-37.0688 37.12-37.0688h74.1888c20.48 0 37.12 16.5888 37.12 37.12v74.1888c0 20.48-16.64 37.0688-37.12 37.0688z m0 682.8032h-74.24a37.0688 37.0688 0 0 1-37.0688-37.0688v-74.24c0-20.48 16.5888-37.0688 37.12-37.0688h74.1888c20.48 0 37.12 16.5888 37.12 37.0688v74.24c0 20.48-16.64 37.0688-37.12 37.0688z m-682.8032 0h-74.24a37.0688 37.0688 0 0 1-37.0688-37.0688v-74.24c0-20.48 16.5888-37.0688 37.12-37.0688h74.1888c20.48 0 37.12 16.5888 37.12 37.0688v74.24c0 20.48-16.64 37.0688-37.12 37.0688z m477.9008-222.208h-116.3776v-167.4752c0-12.9024-1.4336-21.8112-4.0448-26.7776-2.6624-5.0176-7.5776-7.5264-14.592-7.5264-13.1072 0-19.6096 11.52-19.6096 34.6112v167.168H407.296v-167.4752c0-12.9024-1.3824-21.8112-4.1984-26.7776-2.816-5.0176-7.68-7.5264-14.7968-7.5264-12.9024 0-19.3024 11.52-19.3024 34.6112v167.168H252.6208v-191.0784c0-34.9184 11.6736-64.512 35.1744-88.8832a113.8688 113.8688 0 0 1 85.2992-36.608c34.4064 0 65.3824 14.4896 92.8256 43.5712 30.464-28.9792 60.9792-43.5712 91.4944-43.5712 38.8096 0 69.888 14.08 93.3888 42.2912 18.4832 22.016 27.6992 54.1184 27.6992 96.2048v178.0736h-0.1024z m47.5136-300.9024h54.3744c5.4272 0 9.5232 1.1264 12.3904 3.328a10.9568 10.9568 0 0 1 4.3008 9.1136 11.6736 11.6736 0 0 1-3.3792 8.6016c-2.304 2.4064-5.6832 3.4816-10.2912 3.4816h-76.5952c-5.2224 0-9.3184-1.3824-12.2368-4.3008a14.0288 14.0288 0 0 1-4.352-10.24c0-2.4576 0.8704-5.7344 2.7648-9.8816a36.0448 36.0448 0 0 1 6.144-9.6768c9.1648-9.6256 17.5616-17.8176 24.9856-24.576a175.104 175.104 0 0 1 15.872-13.5168c5.6832-3.9936 10.3936-8.0896 14.2336-12.0832a44.4928 44.4928 0 0 0 8.5504-12.544 31.232 31.232 0 0 0 3.072-12.4928 22.784 22.784 0 0 0-11.8272-20.0704 25.2416 25.2416 0 0 0-11.9296-2.9184 24.5248 24.5248 0 0 0-21.504 11.9808 47.7184 47.7184 0 0 0-3.4816 8.4992 35.2768 35.2768 0 0 1-5.5296 10.752c-1.9968 2.4576-4.9664 3.6864-8.96 3.6864a11.3664 11.3664 0 0 1-8.6016-3.4304 13.056 13.056 0 0 1-3.4304-9.3696c0-4.8128 1.1264-9.8304 3.2256-15.0016a44.032 44.032 0 0 1 25.8048-24.5248 62.464 62.464 0 0 1 23.04-3.8912c10.6496 0 19.7632 1.6896 27.2384 5.0176a40.192 40.192 0 0 1 12.8 9.216 43.2128 43.2128 0 0 1 11.7248 29.3888c0 8.6016-2.0992 16.384-6.4 23.5008a73.8816 73.8816 0 0 1-13.1072 16.5888c-4.4032 3.9936-11.9296 10.2912-22.3232 18.7904a163.072 163.072 0 0 0-21.504 19.9168 43.264 43.264 0 0 0-5.12 6.656z"
        />
      </svg>
    </div>
    <div class="tool no-click" id="drawStop" title="结束绘制" disabled="true" @click="endDraw">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="icon"
        width="64px"
        height="64.00px"
        viewBox="0 0 1024 1024"
        version="1.1"
      >
        <path
          fill="#8a8a8a"
          d="M935.424 600.96a85.824 85.824 0 0 0-118.592 0l-36.8 36.864-181.056 181.12a26.944 26.944 0 0 0-7.808 19.84l-11.2 84.032a32.448 32.448 0 0 0 32.96 34.496l84.8-11.2a17.856 17.856 0 0 0 3.392-1.152 26.56 26.56 0 0 0 16.256-7.36l217.92-217.984a83.84 83.84 0 0 0 0-118.592h0.128z m-237.184 278.912l-41.664-41.6 142.72-142.72 41.6 41.728-142.72 142.592z m198.72-198.656l-17.6 17.6-41.664-41.6 17.6-17.792a30.336 30.336 0 0 1 41.664 0 29.184 29.184 0 0 1 0 41.472v0.32z"
        />
        <path
          fill="#8a8a8a"
          d="M421.376 860.992a363.52 363.52 0 1 1 445.056-354.368 37.696 37.696 0 0 0 75.392 0 438.976 438.976 0 1 0-537.152 427.84 37.696 37.696 0 0 0 16.896-73.472h-0.192z"
        />
        <path
          fill="#8a8a8a"
          d="M347.072 345.792m63.616 0l184.384 0q63.616 0 63.616 63.616l0 184.384q0 63.616-63.616 63.616l-184.384 0q-63.616 0-63.616-63.616l0-184.384q0-63.616 63.616-63.616Z"
        />
      </svg>
    </div>
    <div class="tool" style="height: 20px; font-size: 18px" title="更多">
      <!-- <i class="el-icon-more-outline"></i> -->
      <el-dropdown
        trigger="click"
        placement="right"
        size="small"
        :hide-on-click="false"
      >
        <span class="el-dropdown-link">
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="re-el-dropdown-menu">
          <el-dropdown-item
            icon="el-icon-document-add"
            @click.native="addBookmark"
            >新建书签</el-dropdown-item
          >
          <el-dropdown-item
            icon="el-icon-document-copy"
            :disabled="bookmarks.length == 0"
          >
            <el-dropdown trigger="click" placement="right" size="small">
              <span class="el-dropdown-link" style="color: var(--t-color)">
                书签列表
                <i class="el-icon-arrow-right el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="re-el-dropdown-menu">
                <template v-for="(item, index) in bookmarks">
                  <el-dropdown-item
                    icon="el-icon-collection-tag"
                    @click.native="setView(item)"
                  >
                    {{ item.name }}</el-dropdown-item
                  >
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import MapTools from "@/utils/mapTools";
export default {
  name: "Test1ToolBar",
  props: {
    Map: {
      type: Object,
      requered: true,
    },
  },

  data() {
    return {
      mapTools: null,
      bookmarks: [],
      drawStopElement: null,
    };
  },
  computed: {
    getBookmarks() {
      return this.$store.state.bookmarks;
    },
  },
  watch: {
    getBookmarks: {
      handler(newVal) {
        this.bookmarks = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.drawStopElement = document.getElementById("drawStop");
  },

  methods: {
    resetView() {
      const mapTools = new MapTools(this.Map);
      mapTools.resetView();
    },
    measureDistance(v) {
      if (!this.mapTools) this.mapTools = new MapTools(this.Map);
      this.mapTools.measureDistance(v);
      this.drawStopElement.classList.remove("no-click")
    },
    endDraw() {
      if (!this.mapTools)
        return this.$notify.warning({
          title: "警告",
          message: "没有绘制任务，请先开始绘制",
        });
      this.mapTools.endDraw();
      this.drawStopElement.classList.add("no-click")
    },
    addBookmark() {
      const _this = this;
      const bookmarks = this.$store.state.bookmarks;
      const v = "书签" + (bookmarks.length + 1);
      // 弹出对话框，让用户输入书签名称
      this.$prompt("请输入书签名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.{1,10}$/,
        inputValue: v,
        inputErrorMessage: "书签名称不能为空且不能超过10个字符",
      })
        .then(({ value }) => {
          const bookmark = {
            id: bookmarks.length + 1,
            name: value,
            view: {
              center: this.Map.getView().getCenter(),
              zoom: this.Map.getView().getZoom(),
            },
          };
          bookmarks.push(bookmark);
          this.$store.commit("setBookmarks", bookmarks);
          this.$notify.success("添加成功");
        })
        .catch(() => {
          this.$notify.info("取消添加");
        });
    },
    setView(bookmark) {
      if (!bookmark) return;
      const mapTools = new MapTools(this.Map);
      mapTools.setView(bookmark.view.center, bookmark.view.zoom);
    },
  },
};
</script>

<style lang="less" scoped>
.tool-bar {
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  width: 50px;
  left: 20%;
  bottom: 65px;
  margin: 10px;
  border-radius: 4px;
  background-color: var(--b-color-1);
  padding-bottom: 5px;

  .tool {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    background-color: rgba(155, 155, 155, 0.23);
    color: var(--t-color);
    margin: 0 5px;
    margin-top: 5px;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
    i {
      color: var(--t-color);
      font-size: 18px;
    }
    .ico {
      width: 35px;
      height: 35px;
    }
    .icon {
      width: 35px;
      height: 35px;
      path {
        fill: var(--t-color);
      }
    }
  }
}
</style>
<style lang="less">
.no-click {
  cursor: not-allowed !important;
  path {
    fill: var(--t-color-no) !important;
  }
}
</style>
